<template>
  <el-tabs class="space-left"
           v-model="activeName"
           type="card"
           stretch
           @tab-click="handleClick">
    <!-- 空间现状 -->
    <el-tab-pane class="space-left-now"
                 name="first">
      <div slot="label"
           class="label-slot">
        <img class="img-icon"
             src="../../static/image/1/空间现状.png" />
        <span>空间现状</span>
      </div>
      <div class="panel firstCard">
        <div class="panel-abstract">
          <h4>
            <span></span>
            <span>南京市地下空间总面积</span>
          </h4>
          <p>
            <span class="font1">5100</span>
            <span class="font4">万㎡</span>
            <!-- <span></span> -->
            <img src="../../static/image/1/small_triangle.png"
                 alt />
            <span class="font5">10%同比去年</span>
          </p>
        </div>
        <div class="panel-content">
          <div class="panel-detail"
               v-for="(item,index) in panel1"
               :key="index">
            <p class="font4">{{item.option}}</p>
            <p>
              <span class="font1">{{item.data}}</span>
              <span class="font5">{{item.unit}}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="panel secondCard">
        <div class="panel-abstract">
          <h4>
            <span></span>
            <span>重点建设</span>
          </h4>
        </div>
        <div class="panel-content">
          <div class="panel-detail"
               v-for="(item,index) in panel2"
               :key="index">
            <p class="font4">{{item.option}}</p>
            <p>
              <span class="font1_big">{{item.data}}</span>
              <span class="font5_big">{{item.unit}}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="panel thirdCard">
        <h4>
          <span></span>
          <span>地下空间层数面积统计</span>
          <div class='floorToggle'
               @click='floorToggle'>{{floor}}</div>
        </h4>
        <!-- <h3 class="bottomSpace"></h3> -->
        <EchartsInit class="echarts"></EchartsInit>
      </div>
    </el-tab-pane>
    <!-- 趋势分析 -->
    <el-tab-pane label="趋势分析"
                 class="space-left-feature"
                 name="second">
      <div slot="label"
           class="label-slot">
        <img class="img-icon"
             src="../../static/image/1/趋势分析.png" />
        <span>趋势分析</span>
      </div>
      <div class="tab-trend-top">
        <!-- <h3>南京市地下空间面积规划</h3> -->
        <h4>
          <span></span>
          <span>南京市地下空间面积规划</span>
        </h4>
        <EchartsBar class="highCharts_bar"></EchartsBar>
      </div>
      <div class="tab-trend-buttom">
        <h4>
          <span></span>
          <span>南京市地下空间总面积与人均面积</span>
        </h4>
        <div class="mianji_name">
          <span>总面积 </span>
          <span>/ 千万㎡</span>
          <span>人均 </span>
          <span>/ ㎡</span>
        </div>
        <!-- <h3></h3> -->
        <EchartsLine></EchartsLine>
      </div>
    </el-tab-pane>
  </el-tabs>
</template> 
<script>
import Bus from "../utils/bus.js"
import EchartsInit from "../echarts/EchartsInit.vue";
import EchartsBar from "../echarts/EchartsBar.vue";
import EchartsLine from "../echarts/EchartsLine.vue";
export default {
  components: {
    //地下空间层数面积统计的echarts图
    EchartsInit,
    //南京市地下空间面积规划的echarts图
    EchartsBar,
    // 南京地下空间总面积与人均面积趋势预测的echarts图
    EchartsLine
  },
  data () {
    return {
      activeName: "first",
      floor: '打开楼层详情',
      panel1: [
        {
          option: "人均地下空间面积",
          data: "1.5",
          unit: "㎡"
        },
        {
          option: "地下综合利用率",
          data: "7",
          unit: "%"
        },
        {
          option: "地下空间社会主导化率",
          data: "50",
          unit: "%"
        },
        {
          option: "建成地下空间开发强度",
          data: "2.5万",
          unit: "㎡/K㎡"
        }
      ],
      panel2: [
        {
          option: "轨道交通运营里程",
          data: "393.63",
          unit: "公里"
        },
        {
          option: "综合廊管在建里程",
          data: "59.68",
          unit: "公里"
        }
      ]
    };
  },
  mounted () {
    Bus.$on('closeFloor', e => {
      console.log(e)
      if (!e) {
        this.floor = '打开楼层详情'
      }
    })
  },
  methods: {
    floorToggle () {
      if (this.floor === '打开楼层详情') {
        this.floor = '关闭楼层详情'

      } else if (this.floor === '关闭楼层详情') {
        this.floor = '打开楼层详情'
      }
      Bus.$emit('floorToggle', this.floor)
    },
    handleClick (tab, event) {
      // console.log(111);
    }
  }
};
</script>

<style lang="scss">
$precent: 100vw / 1920;
@font-face {
  font-family: bigNum;
  src: url("../../static/HELVETICACDBLK.TTF");
}
.space-left {
  .floorToggle {
    margin-left: 70 * $precent;
    height: 30 * $precent;
    width: 120 * $precent;
    line-height: 30 * $precent;
    color: #a0ff76;
    background-color: #24618e;
    border: 1px solid #11a99a;
    text-align: center;
    border-radius: 5px;
  }
  .floorToggle:hover {
    background-image: linear-gradient(
      to right,
      rgba(26, 111, 148, 0.8),
      rgba(12, 63, 146, 0.8),
      rgba(30, 98, 103, 0.8)
    );
  }
  margin-left: 0 * $precent;
  // width: 483*$precent;
  width: 463 * $precent;
  position: fixed;
  top: 90 * $precent;
  z-index: 10;
  h3 {
    color: #2b9aea;
  }
  .font4 {
    color: #14bfee;
  }
  .label-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 54 * $precent;
    line-height: 54 * $precent;
    color: #5bc3ef;
    // border: 0;
    span {
      font-size: 24 * $precent;
      letter-spacing: 1 * $precent;
      margin-left: 14 * $precent;
      font-weight: 100;
      // font-family: 'SimSun'
      // margin-top: -2*$precent;
    }
  }
  .img-icon {
    width: 30 * $precent;
    height: 30 * $precent;
    display: inline-block;
  }
  .el-tabs__header {
    border: none;
    height: 54 * $precent;
    margin: 0;
    padding-left: 10 * $precent;
    padding-right: 10 * $precent;
    .el-tabs__item {
      border: 0;
    }
    .el-tabs__nav .is-top {
      height: 54 * $precent;
      background: url("../../static/image/1/未选中.png") no-repeat;
      background-size: cover;
      opacity: 0.8;
      width: 100%;
      .label-slot {
        span {
          color: rgb(40, 192, 255);
        }
      }
    }
    .el-tabs__nav {
      border: none;
    }
    // .el-tabs__item.is-active > * {
    //   color: #ffffff;
    // }
    .el-tabs__item.is-active {
      border: none;
      background: url("../../static/image/1/选中.png") no-repeat;
      background-size: cover;
      opacity: 1;

      .label-slot {
        span {
          color: white;
        }
      }
    }
  }

  .space-left-now {
    margin-right: 50 * $precent;
    width: 100%;
    .panel {
      width: 100%;
      text-align: left;
      position: relative;
      margin-top: 7 * $precent;
      .panel-abstract {
        position: absolute;
        left: 25 * $precent;
        top: 15 * $precent;
        h4 {
          text-align: left;
          // margin: 2*$precent 0*$precent 15*$precent 20*$precent;
          font-size: 16 * $precent;
          font-family: "Arita";
          font-weight: 100;
          letter-spacing: 2 * $precent;
          height: 30 * $precent;
          line-height: 40 * $precent;
          display: flex;
          align-items: center;
        }

        h4 {
          span:nth-child(1) {
            width: 5 * $precent;
            height: 20 * $precent;
            background: #fff000;
            // margin-left: 10*$precent;
          }
          span:nth-child(2) {
            margin-left: 10 * $precent;
          }
        }
        > p {
          margin-top: 10 * $precent;
          width: 420 * $precent;
          height: 40 * $precent;
          position: relative;
          // line-height: 40*$precent;
          // display: flex;
          span:nth-child(1) {
            // font-family: bigNum;
            font-weight: 600;
            text-shadow: 0 * $precent 5 * $precent 3 * $precent
              rgba(0, 0, 0, 0.5);
            font-size: 36 * $precent;
            margin-left: 10 * $precent;
          }
          span:nth-child(2) {
            font-size: 30 * $precent;
            color: #ccc;
            font-weight: 100;
            margin-left: 12 * $precent;
          }
          img:nth-child(3) {
            height: 14 * $precent;
            position: absolute;
            top: 16 * $precent;
            left: 210 * $precent;
          }
          span:nth-child(4) {
            font-size: 18 * $precent;
            font-weight: 100;
            color: rgb(115, 255, 237);
            position: absolute;
            top: 10 * $precent;
            right: 65 * $precent;
          }
        }
      }
      .panel-content {
        width: 100%;
        left: 30 * $precent;
        bottom: 30 * $precent;
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .panel-detail {
        width: 50%;
        margin-top: 10 * $precent;
        p:nth-child(1) {
          font-size: 15 * $precent;
          letter-spacing: 1 * $precent;
        }
        p:nth-child(2) {
          .font1 {
            font-size: 24 * $precent;
            font-family: bigNum;
            text-shadow: 0 * $precent 5 * $precent 3 * $precent
              rgba(0, 0, 0, 0.5);
          }
          .font5 {
            font-size: 18 * $precent;
            text-shadow: 0 * $precent 5 * $precent 3 * $precent
              rgba(0, 0, 0, 0.5);
          }
        }
        p {
          // margin-top: 15*$precent;
          padding-left: 15 * $precent;
        }
      }
    }
    .firstCard {
      height: 250 * $precent;
      background: url("../../static/image/1/内容底图-1.png") no-repeat;
      background-size: 100% 100%;
    }
    .secondCard {
      height: 160 * $precent;
      background: url("../../static/image/1/内容底图-2.png") no-repeat;
      background-size: 100% 100%;
      margin-top: -13 * $precent;
      .panel-abstract {
        h4 {
          text-align: left;
          // margin: 2*$precent 0*$precent 15*$precent 20*$precent;
          font-size: 16 * $precent;
          // font-family: 'Arita';
          font-weight: 100;
          letter-spacing: 2 * $precent;
          height: 30 * $precent;
          line-height: 30 * $precent;
          display: flex;
          align-items: center;
        }
        h4 {
          span:nth-child(1) {
            width: 5 * $precent;
            height: 20 * $precent;
            background: #fff000;
            // margin-left: 10*$precent;
          }
          span:nth-child(2) {
            margin-left: 10 * $precent;
          }
        }
      }
      .panel-content {
        bottom: 42 * $precent;
        justify-content: space-between;
        .panel-detail {
          .font4 {
            margin-bottom: 0 * $precent;
            font-size: 18 * $precent;
          }
          p:nth-child(2) {
            .font1_big {
              font-size: 36 * $precent;
              font-weight: 600;
              text-shadow: 0 * $precent 5 * $precent 3 * $precent
                rgba(0, 0, 0, 0.5);
            }
            .font5_big {
              font-size: 30 * $precent;
              color: #ccc;
              letter-spacing: 3 * $precent;
              margin-left: 10 * $precent;
              // display: inline-block;
              // padding-top: 20*$precent;
            }
          }
          width: 50%;
        }
        .panel-detail:nth-child(1) {
          p:nth-child(1) {
            margin-left: -5 * $precent;
          }
          p:nth-child(2) {
            position: relative;
            top: 10 * $precent;
            .font1_big {
              margin-left: -5 * $precent;

              // font-weight: 100;
              // font-family: bigNum;
            }
          }
        }
        .panel-detail:nth-child(2) {
          p:nth-child(1) {
            margin-left: 10 * $precent;
          }
          p:nth-child(2) {
            position: relative;
            top: 8 * $precent;
            .font1_big {
              font-weight: 100;
              font-family: bigNum;
            }
          }
        }
      }

      .panel-detail:nth-child(2) > p {
        // margin-left: 40*$precent;
        color: #12f579;
      }
    }
    .thirdCard {
      height: 540 * $precent;
      background: url("../../static/image/1/内容底图-3.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      top: -18 * $precent;
      // h3 {
      //   height: 18 * $precent;
      //   line-height: 18 * $precent;
      // }
      h4 {
        text-align: left;
        // margin: 2*$precent 0*$precent 15*$precent 20*$precent;
        font-size: 16 * $precent;
        font-family: "Arita";
        font-weight: 100;
        letter-spacing: 2 * $precent;
        height: 55 * $precent;
        line-height: 50 * $precent;
        display: flex;
        align-items: center;
        margin-left: 45 * $precent;
        // padding-top: 10*$precent;
      }
      h4 {
        span:nth-child(1) {
          width: 5 * $precent;
          height: 16 * $precent;
          background: #fff000;
          // margin-left: 10*$precent;
        }
        span:nth-child(2) {
          margin-left: 10 * $precent;
        }
      }
      // .bottomSpace {
      //   background-color: rgba(0, 0, 0, 0);
      // }
      .echarts {
        height: 440 * $precent;
        background-color: rgba(0, 0, 0, 0);
      }
    }
  }

  .space-left-feature {
    width: 100%;
  }
}

.bottomSpace {
  background-color: #f2f2f2;
  text-align: left;
  padding: 20 * $precent;
  padding-bottom: 0;
}

.tab-trend-top {
  margin-top: 8 * $precent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 483 * $precent;
  width: 100%;
  background: url("../../static/image/1/趋势分析内容底图-1.png") no-repeat;
  h4 {
    text-align: left;
    // margin: 2*$precent 0*$precent 15*$precent 20*$precent;
    font-size: 20 * $precent;
    font-family: "Arita";
    font-weight: 100;
    letter-spacing: 2 * $precent;
    height: 80 * $precent;
    line-height: 80 * $precent;
    display: flex;
    align-items: center;
    margin-left: -153 * $precent;
    // padding-top: 10*$precent;
  }
  h4 {
    span:nth-child(1) {
      width: 5 * $precent;
      height: 20 * $precent;
      background: #fff000;
      // margin-left: 10*$precent;
    }
    span:nth-child(2) {
      margin-left: 10 * $precent;
    }
  }
  .highCharts_bar {
    width: 390 * $precent;
    height: 400 * $precent;
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    top: -30 * $precent;
  }
  background-size: 100% 100%;
  > h3 {
    margin-left: 55 * $precent;
    width: 100%;
    text-align: left;
    background-color: rgba(0, 0, 0, 0);
  }
}
.tab-trend-buttom {
  margin-top: -6 * $precent;
  height: 450 * $precent;
  width: 100%;
  background: url("../../static/image/1/趋势分析内容底图-2.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  h4 {
    text-align: left;
    font-size: 20 * $precent;
    font-family: "Arita";
    font-weight: 100;
    letter-spacing: 2 * $precent;
    height: 80 * $precent;
    line-height: 80 * $precent;
    display: flex;
    align-items: center;
    margin-left: 25 * $precent;
  }
  h4 {
    span:nth-child(1) {
      width: 5 * $precent;
      height: 20 * $precent;
      background: #fff000;
      // margin-left: 10*$precent;
    }
    span:nth-child(2) {
      margin-left: 10 * $precent;
    }
  }
  .mianji_name {
    position: absolute;
    width: 100%;
    height: 30 * $precent;
    font-size: 15 * $precent;
    top: 100 * $precent;
    letter-spacing: 1 * $precent;
    span:nth-child(1) {
      color: #00e4ff;
    }
    span:nth-child(2) {
      color: #ccc;
    }
    span:nth-child(3) {
      color: #00ff84;
      margin-left: 220 * $precent;
    }
    span:nth-child(4) {
      color: #ccc;
    }
  }
  // > h3 {
  //   margin-left: 10 * $precent;
  //   text-align: left;
  //   padding: 20 * $precent;
  //   background-color: rgba(0, 0, 0, 0);
  // }
  .echartsLine {
    // width: 410*$precent;
    width: 410 * $precent;
    height: 350 * $precent;
    margin-left: 20 * $precent;
    margin-top: -15 * $precent;
    background-color: rgba(0, 0, 0, 0);
    // border: 1*$precent solid;
  }
}
</style>